<template>
  <div class="item-box">
    <div
      class="item-label"
      v-html="brightenKeyword(label)"
      @click="goToDetail(id)"
    ></div>
    <div class="item-content" v-html="brightenKeyword(content)"></div>
    <div class="item-date">{{ date }}</div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true, type: String },
    label: { required: true, type: String },
    content: { required: true, type: String },
    date: { required: true, type: String },
  },
  methods: {
    goToDetail(fileId) {
      this.$router.push({
        path: "/docdetail",
        query: {
          id: fileId,
        },
      });
    },
    //高亮搜索关键字
    brightenKeyword(val) {
      let keyword = this.$route.query.keyWord; //*搜索关键字*
      val = val + "";
      var encode;
      if (val.indexOf(keyword) !== -1 && keyword !== "") {
        encode = eval("/" + keyword + "/g");
        return val.replace(encode, '<font color="red">' + keyword + "</font>");
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.item-box {
  text-align: left;
  height: 100px;
  width: 640px;
}
.item-label {
  cursor: pointer;
  font-size: 24px;
  max-width: 560px;
  color: blue;
  width: auto;
  display: inline-block;
  margin-bottom: 4px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.item-label:hover {
  text-decoration: underline;
}
.item-content {
  font-size: 14px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.item-date {
  font-size: 14px;
  margin-top: 2px;
}
</style>
